@extends('layouts.home')
@section('content')
<div class="blog-body">
    <link href="/css/article-detail.min.css?v=EGhH8RUbetjuF9LLZEYhnODzqsTcq1eYpF59oh1JFKg" rel="stylesheet" />
    <link href="/css/wangEditor.min.css?v=2N9vS3yctH6B8ed6k9ggyeUcNT8mQxQaDL_BGlLfuAs" rel="stylesheet" />
    <link href="/css/prettify.min.css?v=-BuNhdU1amlN_FegNtG-u1BSm6AyC--YVgG85C78HUw" rel="stylesheet" />
    <link href="/lib/APlayer/APlayer.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/admin/lib/editormd/css/editormd.min.css">
    <div class="layui-container">
        <blockquote class="layui-elem-quote sitemap shadow">
            <i class="layui-icon">&#xe715;</i>
            <span class="layui-breadcrumb" lay-separator=">">
            <a href="/">首页</a>
            <a href="/article/all">学海无涯</a>
            <a href="/category/{{$type->id}}">{{$type->title}}</a>
            <a><cite>{{$article->title}}</cite></a>
        </span>
        </blockquote>
        <div class="layui-row layui-col-space15 clearfix">
            <div class="layui-col-md8 left">
                <div data-fontsize="14" class="article-detail shadow">
                    <div class="article-tool">
                        <div style="float:left;">
                            <button class="layui-btn layui-btn-primary layui-btn-xs" title="发布日期">
                                {{$article->created_at}}
                            </button>
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="浏览">
                                    <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;">{{$article->click ?? 0}}</span>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="评论">
                                    <i class="fa fa-comments fa-fw"></i><span style="margin-left:3px;">{{$article->comments_count ?? 0}}</span>
                                </button>
                            </div>
                        </div>
                        <div class="tool-box">
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="静音">
                                    <i class="fa fa-volume-up fa-fw"></i>
                                </button>
                            </div>
                            <div class="layui-btn-group layui-hide-xs">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体缩小">
                                    <i class="fa fa-minus fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体还原">
                                    <i class="fa fa-undo fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="字体放大">
                                    <i class="fa fa-plus fa-fw"></i>
                                </button>
                            </div>
                            <div class="layui-btn-group layui-hide-xs">
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="展开阅读">
                                    <i class="fa fa-arrows-h fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn-primary layui-btn-xs" title="全屏阅读">
                                    <i class="fa fa-arrows-alt fa-fw"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="article-detail-title">
                       {{$article->title}}
                    </div>
                    <div class="article-detail-abstract">
                        <span class="layui-badge">摘要</span>
                        <span id="abstract">{{$article->keywords}}</span>
                    </div>
                    <div class="markdown-body editormd-preview-container editormd-preview-active" style="padding: 0px" previewcontainer="true">
                    <div class="article-detail-content w-e-text">

                        <?php echo $article->content; ?>

                        <div class="article-detail-copyright">
                            <p>版权声明：本文由<a href="/" style="color:#1E9FFF;margin:0 5px;">不言弃</a>原创出品，转载请注明出处！</p>
                            <p>本文链接：<a href="http://www.agoni.top/article/detail/{{$article->id}}" target="_blank" alt="不言弃">http://www.agoni.top/article/detail/{{$article->id}}</a></p>
                        </div>

                    </div>
                    </div>
                </div>
                <div class="article-component">
                    <div class="component-box">
                        <a href="javascript:;" class="praise" blog-event="praise"><i class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt">{{$zan_count}}</span>）</a>
                        <a href="javascript:;" class="reword" blog-event="reword">赏</a>
                        <a href="javascript:;" style="float: right;" class="share" blog-event="share"><i class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">3</span>）</a>
                    </div>
                </div>

                <div class="article-music">
                    <div style="border-bottom:1px solid #ddd;">
                        <span class="layui-badge">本文配乐</span>
                    </div>
                    <div id="aplayer"></div>
                </div>

                <div class="blog-card blog-card-padding shadow">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>来说两句吧</legend>
                        <div class="layui-field-box">
                            <form class="layui-form blog-editor" action="">
                                <input type="hidden" id="hidArticleId" name="article_id" value="{{$article->id}}" />
                                <div class="layui-form-item">
                                    <textarea name="comment" lay-verify="content" id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn  " lay-submit="formRemark" lay-filter="formRemark">提交评论</button>
                                </div>
                            </form>
                        </div>
                    </fieldset>
                    <div class="blog-card-title">最新评论</div>
                    <ul class="blog-comment">
                        @foreach($comment_list as $item7=>$value7)
                        <li>
                            <div class="comment-parent">
                                <a name="remark-{{$value7['id']}}"></a>
                                <img src="{{$value7['users']['avatar']}}" alt="{{$value7['users']['name']}}">
                                <div class="info">
                                    <span class="name">{{$value7['users']['name']}}</span>
                                </div>
                                <div class="content">
                                    {{$value7['content']}}
                                </div>
                                <p class="info info-footer"><span class="time">{{$value7['created_at']}}</span><a href="javascript:;" class="btn-reply" data-pid="{{$value7['id']}}" data-targetid="{{$value7['users']['id']}}" data-targetname="{{$value7['users']['name']}}">回复</a></p>
                            </div>

                            <hr>
                            @if(!empty($value7['child']))
                                @foreach($value7['child'] as $item8=>$value8)
                                    <div class="comment-child">
                                        <a name="reply-59"></a>
                                        <img src="{{$value8['users']['avatar']}}" alt="{{$value8['users']['name']}}">
                                        <div class="info">
                                            <span class="name">{{$value8['users']['name']}}</span>
                                            <span style="padding-right:0;margin-left:-5px;">回复</span>
                                            <span class="name">{{$value8['by_reply_user']['name']}}</span>
                                            <span>{{$value8['content']}}</span>
                                        </div>
                                        <p class="info"><span class="time">{{$value8['created_at']}}</span><a href="javascript:;" class="btn-reply" data-pid="{{$value8['id']}}" data-targetid="{{$value8['users']['id']}}" data-targetname="{{$value8['users']['name']}}">回复</a></p>
                                    </div>
                                @endforeach
                            @endif


                            <div class="replycontainer layui-hide">
                                <form class="layui-form" action="">
                                    <input type="hidden" name="pid" value="{{$value7['id']}}">
                                    <input type="hidden" name="targetUserId" value="0">
                                    <input type="hidden" name="article_id" value="{{$article->id}}">
                                    <div class="layui-form-item">
                                        <textarea name="comment" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <button class="layui-btn layui-btn-xs  " lay-submit="formReply" lay-filter="formReply">提交</button>
                                    </div>
                                </form>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            <div class="layui-col-md4 right">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm6 layui-col-md12 padding0">
                        <div class="article-category shadow">
                            <div class="article-category-title">分类导航</div>
                            @foreach($type_all as $item1=>$value1)
                                <a href="/category/{{$value1->id}}">{{$value1->title}}</a>

                            @endforeach
                            <div class="clear"></div>
                        </div>
                    </div>
                    {{--<div class="layui-col-sm6 layui-col-md12">--}}
                        {{--<div class="blog-card shadow">--}}
                            {{--<div class="blog-card-title">相似文章</div>--}}
                            {{--<ul class="blog-card-ul">--}}
                                {{--<li>--}}
                                    {{--<div class="emptybox">--}}
                                        {{--<p><i style="font-size:50px;color:#5fb878" class="layui-icon">&#xe69c;</i></p>--}}
                                        {{--<p>暂时没有任何数据</p>--}}
                                    {{--</div>--}}
                                {{--</li>--}}
                            {{--</ul>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow">
                            <div class="blog-card-title">
                                <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe756;</i></span>
                                <span class="text">热文排行</span>
                            </div>
                            <ul class="blog-card-ul">
                                @foreach($hot_article as $item5=>$value5)
                                    <li>
                                        <span class="layui-badge {{($item5+1)>3?"layui-bg-blue":''}}">{{$item5+1}}</span><a href="/article/detail/{{$value5->id}}"
                                                                                                                            title="{{$value5->title}}">{{$value5->title}}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="layui-col-sm6 layui-col-md12">
                        <div class="blog-card shadow sr-rightmodule">
                            <div class="blog-card-title">
                                <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                                <span class="text">随便看看</span>
                            </div>
                            <ul class="blog-card-ul">
                                @foreach($author_article as $item7=>$value7)
                                    <li>
                                        <span class="layui-badge" {{($item7+1)>=3?'layui-bg-blue':''}}>{{$item7+1}}</span><a href="/article/detail/{{$value7->id}}" title="{{$value7->title}}">{{$value7->title}}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
            </div>
        </div>
    </div>
{{--    <iframe allowfullscreen="true" allowtransparency="true" allowtransparency="true" frameborder="0"--}}
{{--            id="ifa"--}}
{{--            scrolling="no"--}}
{{--           ></iframe>--}}
        <script type='text/javascript'>

        var imgs=document.getElementsByTagName('img');
        var newimgarr=[];

        for(var i=0;i<imgs.length;i++){
            var g=imgs[i];
            if(g.getAttribute('data-original')){
                g.setAttribute('src',g.getAttribute('data-original'))
                newimgarr.push(g);
            }
        }
        // var i=document.getElementById('ifa');
        // var w=i.contentWindow;
        // for(var j=0;j<newimgarr.length;j++){
        //     var k=newimgarr[j];
        //     (function(k){
        //         console.log('aa',k)
        //         var imgurl=k.getAttribute('data-original');
        //         getImg(w,imgurl,function(){
        //             k.src=imgurl;
        //         });
        //     })(k);
        //
        // }
        //
        // function getImg(doc,src,callback){
        //     var img=doc.document.createElement('img');
        //     console.log('测试')
        //     img.src=src;
        //     img.onload=callback;
        //     doc.document.body.appendChild(img);
        //
        // }
    </script>

    <script src="/lib/layui/layui.js?v=Q4hfA5tL6flbhH6c-jlA6yVJRpZRgzEJ43xJxeRS3Ps"></script>

    <script src="/js/prettify.js?v=zrVStJyI19zKIscyH1q3EXrupqTNa5eYYJQJFU8BH4Y"></script>

    <script src="/lib/APlayer/APlayer.min.js?v=6Y7CJDaltoeNgk-ZftgCD9jLgmGv4xKUo8nQ0HgAwVo"></script>
    <script type="text/javascript">
        var audio = new Array();

        // audio.push({
        //     name: '迷幻世界',
        //     artist: '不可撤销乐队',
        //     url: '/迷幻世界.m4a',
        //     cover: 'http://p2.music.126.net/4x2X7W_VGHQeHoMR4a3Wbw==/3227066628477266.jpg?param=130y130',
        //     theme: '#e2d4ba'
        // });
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            autoplay: true,
            volume: 0.5,
            audio: audio
        });
    </script>

    <script type="text/javascript">
        var shareIndex, $;

        prettyPrint();

        layui.use(['layer', 'form'], function () {
            $ = layui.$;
            var form = layui.form
                , device = layui.device();


            //文章顶部工具栏按钮点击事件
            $('.tool-box button').on('click', function () {
                var title = $(this).attr('title');
                switch (title) {
                    case '全屏阅读':
                        var content = $('.article-detail').prop("outerHTML");
                        layer.open({
                            title: false,
                            type: 1,
                            content: content,
                            closeBtn: 0,
                            scrollbar: false,
                            area: ['100vw', '100vh'],
                            success: function (layero, index) {
                                $(layero).find('.article-tool').html('<div class="tool-box"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary layui-btn-xs" title="关闭全屏"><i class="fa fa-compress fa-fw"></i></button></div></div>');
                                $(layero).find('.article-tool button').on('click', function () {
                                    layer.close(index);
                                });
                            }
                        });
                        break;
                    case '展开阅读':
                        $('.right').hide();
                        $('.left').css({
                            'width': '100%'
                        });
                        $(this).attr('title', '收缩阅读');
                        $(this).html('<i class="fa fa-compress fa-fw"></i>');
                        break;
                    case '收缩阅读':
                        $('.right').show();
                        $('.left').css('width', '');
                        $(this).attr('title', '展开阅读');
                        $(this).html('<i class="fa fa-arrows-h fa-fw"></i>');
                        break;
                    case '字体缩小':
                        var fontsize = Number($('.article-detail').data('fontsize'));
                        fontsize = fontsize - 1;
                        if (fontsize < 12) fontsize = 12;
                        $('.article-detail').data('fontsize', fontsize);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                        break;
                    case '字体还原':
                        $('.article-detail').data('fontsize', 14);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', '');
                        break;
                    case '字体放大':
                        var fontsize = Number($('.article-detail').data('fontsize'));
                        fontsize = fontsize + 1;
                        if (fontsize > 20) fontsize = 20;
                        $('.article-detail').data('fontsize', fontsize);
                        $('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
                        break;
                    case '静音':
                        $(this).attr('title', '开启');
                        $(this).html('<i class="fa fa-volume-off fa-fw"></i>');
                        ap.volume(0, false);
                        break;
                    case '开启':
                        $(this).attr('title', '静音');
                        $(this).html('<i class="fa fa-volume-up fa-fw"></i>');
                        ap.volume(0.5, false);
                        break;
                    default:
                }
            });

            //回复按钮点击事件
            $('.btn-reply').on('click', function () {

                var targetId = $(this).data('targetid')
                    , targetName = $(this).data('targetname')
                    , $container = $(this).parent('p').parent().siblings('.replycontainer')
                    , pid=$(this).data('pid');
                if ($(this).text() == '回复') {
                    $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
                    $container.removeClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(targetId);
                    $container.find('input[name="pid"]').val(pid);
                    $(this).parents('.blog-comment li').find('.btn-reply').text('回复');
                    $(this).text('收起');
                } else {
                    $container.addClass('layui-hide');
                    $container.find('input[name="targetUserId"]').val(0);
                    $(this).text('回复');
                }
            });

            //监听留言回复提交
            form.on('submit(formReply)', function (data) {
                if ($(data.elem).hasClass('layui-btn-disabled')) {
                    return false;
                }
                var index = layer.load(1);

                $.ajax({
                    type: 'post',
                    url: '/comment',
                    data: data.field,
                    beforeSend:function(){
                        $(data.elem).removeClass('layui-btn-xs').addClass('layui-btn-disabled');
                    },
                    success: function (res) {
                        layer.close(index);
                        if (res.code === 200) {
                            layer.msg(res.msg, { icon: 6 });
                            setTimeout(function () {
                                location.reload(true);
                            }, 500);

                        } else {
                            if (res.msg != undefined) {
                                layer.msg(res.msg, { icon: 5 });
                            } else {
                                layer.msg('程序异常，请重试或联系作者', { icon: 5 });
                            }
                        }
                    },
                    complete:function(){
                        layer.close(index);
                        $(data.elem).removeClass('layui-btn-disabled').addClass('layui-btn-xs');
                    },
                    error: function (e) {
                        layer.msg("请求异常", { icon: 2 });
                    }
                });
                return false;
            });
            var events = {
                //分享
                share: function () {

                    shareIndex = layer.open({
                        type: 1,
                        shade: 0.6,
                        shadeClose: true,
                        area: ['auto', '50px'],
                        resize: false,
                        skin: 'share',
                        closeBtn: 0,
                        anim: 1,
                        title: false, //不显示标题
                        content: $('.bdsharebuttonbox')
                    });
                }

                //点赞
                , praise: function () {
                    var localdata = layui.data('blog')
                        , articleId = $('#hidArticleId').val()
                        , self = this;
                    if (localdata['praise' + articleId]) {
                        layer.tips('你已点过赞了，若收获颇大，可打赏作者！^_^', self, { tips: 1, time: 2000 });
                        return;
                    }
                    $.post('/article/praise', { article_id: articleId, type: 'praise' }, function (res) {
                        if (res.code == 200) {
                            layui.data('blog', {
                                key: 'praise' + $('#hidArticleId').val()
                                , value: true
                            });
                            //点赞+1
                            var cnt = Number($('#praiseCnt').text()) + 1;
                            $('#praiseCnt').text(cnt);
                            layer.tips('Thank you ^_^', self, { tips: 1, time: 2000 });
                        } else {
                            layer.msg(res.msg);
                        }
                    });
                }

                //打赏
                , reword: function () {
                    layer.tab({
                        area: ['330px', '373px'],
                        shade: 0.6,
                        tab: [{
                            title: '微信',
                            content: '<img style="width:330px;height:330px;" src="/" />'
                        }, {
                            title: '支付宝',
                            content: '<img style="width:330px;height:330px;" src="/" />'
                        }]
                    });

                }
            };

            $('*[blog-event]').on('click', function () {
                var eventName = $(this).attr('blog-event');
                events[eventName] && events[eventName].call(this);
            });

            $('*[blog-event="reword"]').on('mouseover', function () {
                layer.tips('一元足以感动我 ^_^', this, { tips: 1, time: 2000 });
            });
        });
    </script>

{{--    <div class="bdsharebuttonbox" data-tag="share_1" style="display:none;">--}}
{{--        <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>--}}
{{--        <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>--}}
{{--        <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>--}}
{{--        <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>--}}
{{--    </div>--}}
    <!--百度分享-->
{{--    <script>--}}
{{--        window._bd_share_config = {--}}
{{--            common: {--}}
{{--                bdPic: 'https://res.leo96.com/images/cover/20180410_623024.jpg',--}}
{{--                onAfterClick: function (cmd) {--}}
{{--                    var articleId = $('#hidArticleId').val();--}}
{{--                    if (cmd === 'weixin') {--}}
{{--                        layer.close(shareIndex);--}}
{{--                        $.post('/api/article/praiseorshare', { articleId: articleId, type: 'share' });--}}
{{--                        var cnt = Number($('#shareCnt').text()) + 1;--}}
{{--                        $('#shareCnt').text(cnt);--}}
{{--                    }--}}
{{--                }--}}
{{--            },--}}
{{--            share: [{--}}
{{--                "tag": "share_1",--}}
{{--                "bdSize": "32"--}}
{{--            }]--}}
{{--        }--}}
{{--        with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://bdimg.share.baidu.com/static/api/js/share.js?cdnversion=' + ~(-new Date() / 36e5)];--}}
{{--    </script>--}}
</div>
@endsection